<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="请输入商品名称"
						@confirm="confirm" v-model="searchInput" />
				</view>
				<block slot="right" @click="searchOrder">
					<view class="city">
						搜索
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<view class="orders">
			<view class="orders-item" v-for="item in ordersList">
				<view class="orders-item-top" @click="turn(item.id)">
					<view class="orders-item-top-image">
						<image :src="item.image"></image>
					</view>
					<view class="orders-item-top-main">
						<view style="color: darkorange;width: 100%;text-align: right; " v-if="item.status==1">
							待付款
						</view>
						<view style="color: darkorange;width: 100%;text-align: right;" v-if="item.status==2">
							已完成
						</view>
						<view class="orders-item-top-main-item">
							<view class="orders-item-top-main-item-shopName">
								{{item.shopName}}
							</view>

							<view class="orders-item-top-main-item-account">
								¥{{item.price}}
								<text v-if="item.shopCount!=1">
									*{{item.shopCount}}
								</text>
							</view>
						</view>

						<view v-if="item.shopDescription!=null" class="orders-item-top-main-item-description">
							{{item.shopDescription}}
							<text
								style="font-size: 1.5vh;display: flex;justify-content: space-between;">共{{item.shopCount}}件</text>
						</view>

					</view>

				</view>
				<view style="text-align: right;font-size: 1.7vh;">
					实付款¥{{item.account}}
				</view>
				<view class="orders-item-bottom">
					<view class="orders-item-bottom-deleteOrders" @click="deleteOrder(item.id)" >
						删除订单
					</view>
					<view v-if="item.status==1" class="orders-item-bottom-moreOrders">
						付款
					</view>
					<view v-if="item.status==2" class="orders-item-bottom-moreOrders" @click="openPopup(item.shopId)">
						发表评论
					</view>

				</view>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="评论" value="对话框预置提示内容!" placeholder="请输入内容"
				@confirm="dialogInputConfirm">
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					
					<uni-forms-item  label="评论:">
						<uni-easyinput  type="input"  v-model="baseFormData.content" placeholder="请输入评论内容" />
					</uni-forms-item>
					<uni-forms-item label="评分:" >
						<uni-rate v-model="baseFormData.storage" />
					</uni-forms-item>
					<!-- <uni-forms-item  >
						<view @click="upload()">上传图片</view>
						<view @click="upload()" style="width: 8vh; height: 8vh;">
							<image style="width: 100%;height: 100%;margin: auto;" :src="imageUrl"></image>
						</view>
					</uni-forms-item> -->
					
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { submitComment } from '../../api/comment'
import {
	deleteOrder1,
		getOrdersList
	} from '../../api/orders'
	import {
		baseUrl
	} from '../../config'
	export default {
		data() {
			return {
				searchInput: "",
				count: "",
				ordersList: [],
				baseFormData:{},
				imageUrl:"/static/img/upload.png",
				imageName:"",
				currentId:""
				
			}
		},
		methods: {
			searchOrder() {
				var _this=this
				var param = {
					userId: uni.getStorageSync('auth'),
					shopName: this.searchInput
				}
				if(!param.shopName){
					delete param.shopName
				}
				getOrdersList(param).then(res => {
					for (var i = 0; i < res.data.data.length; i++) {
						res.data.data[i].image = baseUrl + "/common/download?name=" + res.data.data[i].image
					}
					_this.ordersList = res.data.data
				})
			},
			turn(id) {
				// uni.navigateTo({
				// 	url: "/pages/detail/orderDetail?id=" + id
				// })
			},
			deleteOrder(id){
				var _this=this
				uni.showModal({
					title:"是否删除此订单",
					success(r) {
						if(r.confirm){
							deleteOrder1(id).then(res=>{
								console.log(res);
								var param = {
									userId: uni.getStorageSync('auth'),
									shopName: _this.searchInput
								}
								if(!param.shopName){
									delete param.shopName
								}
								 getOrdersList(param).then(r1=> {
									for (var i = 0; i < r1.data.data.length; i++) {
										r1.data.data[i].image = baseUrl + "/common/download?name=" + r1.data.data[i].image
									}
									 _this.ordersList = r1.data.data
								})
								console.log("页面重新加载完成");
								console.log(_this.ordersList);
							})
						
						}
					}
				})

			},
			openPopup(e) {
				console.log(e);
				this.currentId=e
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(){
				var param={
					shopId:this.currentId,
					userId:uni.getStorageSync('auth'),
					...this.baseFormData
				}
				submitComment(param).then(res=>{
					console.log(res);
					this.baseFormData=""
				})
			}

		},
		onLoad() {
			this.searchOrder()
		}
	}
</script>

<style>
	.box-bg {
		background-color: #F5F5F5;
		padding: 5px 0;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: 4px;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}

	.orders {
		display: flex;
		flex-wrap: wrap;
	}

	.orders-item {
		background-color: white;
		width: 95%;
		margin: 1vh auto;
		border-radius: 2vh;

	}

	.orders-item-top {
		width: 100%;
		flex: 3;
		display: flex;
		height: 12vh;
	}

	.orders-item-bottom {
		flex: 1;
		width: 100%;
		display: flex;
		justify-content: flex-end;
		margin: 2vh;
	}

	.orders-item-bottom view {}

	.orders-item-top-image {
		/* height: 12vh;
		width: 12vh; */
		flex: 0 0 12vh;
		height: auto;
		margin-top: 1.5vh;
		margin-left: 1.5vh;
	}

	.orders-item-top-image image {
		width: 100%;
		height: 100%;
		border-radius: 2vh;
	}

	.orders-item-top-main-item {
		display: flex;
		justify-content: space-around;
		margin-top: 1vh;

	}

	.orders-item-top-main {
		margin: 1vh 1.2vh;
		flex: 1;
		display: flex;
		flex-direction: column;

		/* align-self: flex-end; */
	}

	.orders-item-top-main-item-shopName {
		flex: 4;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.orders-item-top-main-item-account {
		flex: 1;
		text-align: center;
	}

	.orders-item-top-main-item-description {
		font-size: 2vh;
		color: gray;
		width: 100%;
		flex: 2;
		margin-top: 1vh;

	}

	.orders-item-bottom-deleteOrders {
		border: 0.2vh solid gray;
		padding: 1vh 1.5vh;
		border-radius: 4vh;
		margin-right: 2vh;
		font-size: 1.5vh;


	}

	.orders-item-bottom-moreOrders {
		border: 0.2vh solid gray;
		padding: 1vh 1.5vh;
		border-radius: 4vh;
		margin-right: 2vh;
		font-size: 1.5vh;
		font-weight: bold;
		color: orange;
		border: 0.2vh solid orange;
	}
</style>